\section{JavaScript简介}

\subsection{JavaScript的特点}

JavaScript是一门可以运行在浏览器端的脚本语言。它与浏览器的结合使它成为世界上最为流行的编程语言之一，但它不是所谓的主流编程语言，在对这门语言没有太多了解，甚至对编程都没有什么了解的情况下，用户也能用它解决工作中的一些问题。

JavaScript是事件驱动的语言。当用户在网页中进行某种操作时，就产生了一个“事件”。事件几乎可以是任何事情：单击一个网页元素、鼠标的移动等等均可视为事件。JavaScript是事件驱动的，当事件发生时，它可以对之作出响应。具体如何响应某个时间由编写的事件响应处理程序完成。

JavaScript是一种基于对象的语言，基于对象的语言含有面向对象语言的编程思想，但比面向对象语言更简单。它本身已包含一些创建完成的对象，通常情况下都是使用这些已创建好的对象。

JavaScript是一种容易学习和掌握的编程语言。与其他编程语言相比，JavaScript学习难度较低，学习资源丰富，由于JavaScript大多数情景都是在浏览器端使用，因此，用户可以通过查看源代码来学习，很多网站将所使用的JavaScript脚本都是开放的，可以下载学习并使用。

Javascript是一种跨平台的脚本语言。JavaScript的运行依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可正确执行。

\subsection{JavaScript的用途}

JavaScript可以完成以下任务：

\begin{enumerate}
	\item JavaScript为HTML提供了一种程序工具，弥补了HTML语言在功能上的局限。HTML只是一种标记语言，它的作用是将网页的内容通过标记组织起来，JavaScript为其提供了实现动态交互和输出的一种途径，它可以很好地结合HTML标记语言实现复杂的应用。
	\item JavaScript可以为HTML页面动态添加内容。用户可以传递数据至JavaScript脚本，再由JavaScript修改HTML内容。
	\item JavaScript能响应一定的事件。当某些事件发生时，如键入内容、鼠标滑过、页面装载完毕等等，JavaScript都可以根据事件作出响应。
	\item JavaScript可以动态地获取和改变HTML的元素属性和CSS属性，从而动态地创建内容和改变内容的显示。
	\item JavaScript可以检验数据，这在验证表单时候特别有用，在用户提交数据之前就可以保证数据的正确性，既能减轻服务器压力，又能使用户有更好的体验。
	\item JavaScript可以检验用户的浏览器，从而为用户提供更好的页面显示效果。
	\item JavaScript可以创建和读取Cookie，根据保留在cookie中的数据，调整页面内容，提供更加个性化的服务。
\end{enumerate}

尽管JavaScript能够完成很多复杂的应用，但由于浏览器安全性的考虑，JavaScript有一些固有的限制，这些限制包括：
\begin{enumerate}
	\item JavaScript不允许读写客户端文件。唯一的例外是，JavaScript可以读写Cookie文件，但是也有一些限制。这样限制能避免恶意程序传播病毒木马、窃取用户信息。
	\item JavaScript不允许写服务器端文件。尽管网页中有大量数据需要从服务器端读取和写入，如用户提交的投票信息、新闻评论、点击量等等，但是JavaScript不允许向服务器写入文件，通常都是利用服务器端脚本，如PHP、ASP程序来完成服务器文件的操作。
	\item JavaScript不能从读取已经打开的其它窗口的信息，因此，JavaScript无法知晓浏览当前网页的用户还在访问哪些其它站点。
	\item JavaScript不能操纵不是由它打开的窗口，这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器，强制用户接受信息。
	\item JavaScript调整浏览器窗口的大小和位置时，不能将窗口设置的很小或者移出屏幕之外。
\end{enumerate}

\subsection{JavaScript开发环境}

进行JavaScript的开发，需要开发人员具备以下环境：

\begin{description}
	\item [文本编辑器] JavaScript脚本是纯文本文件，因此，开发人员可选择自己熟悉的文本编辑器，推荐使用Sublime Text编辑器。
	\item [浏览器] 由于JavaScript是网页内容的一部分，要预览脚本的运行效果，自然少不了浏览器，根据项目的不同，开发人员应该选择合适的浏览器，一般而言，至少需要IE、Firefox浏览器。
	\item [调试工具] JavaScript脚本在开发过程中难免出现预料之外的运行结果，为提高开发效率，需要安装JavaScript调试工具，建议使用Firefox浏览器中的firebug组件，下载地址\url{http://getfirebug.com/}。
\end{description}

除上述工具之外，开发人员最好还应该有权威准确、更新及时的参考手册，推荐以下学习资源：
\begin{enumerate}
	\item \url{https://developer.mozilla.org/zh-CN/docs/Web/JavaScript}
	\item 《精通JavaScript》\cite{Resig，2008}
\end{enumerate}

\subsection{在网页中使用JavaScript的方法}

就像在HTML中使用CSS一样，必须通过适当的方法将JavaScript和HTML结合起来使用，JavaScript只有被嵌入到HTML中时才能对网页产生作用。和使用CSS的方式类似，在HTML中使用JavaScript的方式有三种，即嵌入式、行内式和链接式。

\subsubsection{嵌入式}

所谓嵌入式使用JavaScript的方法就是利用script元素将脚本嵌入到网页中。Script元素是HTML语言为了引入脚本程序而定义的一个标记，插入脚本的具体方法是：把脚本用script元素标记后，放在HTML文件中的head部分或者body部分。虽然script脚本既可以放在head部分和body部分，但比较好的做法是将所有包含预定义函数的脚本放在head部分，因为HTML的内容在浏览器中处理时是从上到下解释的，放在head中的脚本比放在body中的脚本先处理。这样，浏览器在处理body中的元素内容时需要用到的JavaScript功能已经预先装载，减少出错的可能。同样的道理，如果JavaScript脚本需要等到页面完全装载完毕才要使用，则将其放置在body部分末尾。

使用script元素标记标本的语法如下：
\begin{lstlisting}
<script >
	脚本内容
</script>
\end{lstlisting}

下面的HTML代码创建了一行文本，当用户单击文本时，文字会改变为其它内容。

\lstinputlisting{example/JavaScript/embedjs.html}

在上述代码中，onclick="hello()"表示当鼠标单击时执行hello()函数功能，而display函数就是用script元素标记的嵌入式脚本。

\subsubsection{行内式}

所谓行内式脚本应用就是将脚本内容写在HTML元素的标记中，在这些标记中，将事件和相应内容写在一起。
如上例的HTML代码，如果用行内式的写法可以修改如下，而执行结果是完全相同的：

\lstinputlisting{example/JavaScript/inlinejs.html}

从上述代码可以看到，行内式的写法似乎更加简洁，但是，在实际工作中，我们要尽量避免这种写法，因为行内式嵌入的脚本可读性很差，不容易维护，不符合Web标准中将内容、表现、行为三者相分离的原则。而且，但从效率的角度来讲，如果某个功能要反复使用，则行内式的写法将会过于繁琐，反倒是其它写法更加简洁。故而，行内式使用脚本的方式仅限于较为简单的情况。

\subsubsection{链接式}

所谓链接式就是将JavaScript脚本文件单独写在后缀名为js的文件中，然后在需要使用此脚本的网页中加入脚本文件的路径名称即可。这种方式使用的脚本可以链接到多个网页甚至多个网站中，提高了代码的重用性，也方面了维护，同时也能降低网站主机访问次数，提高网站性能。

要引用外部js文件，需要在合适的地方，一般为HTML文件的head部分，使用script元素来指定外部脚本存放的路径和名称。

还是以上述中的HTML为例，如果改写成链接式引用，则需要将脚本存放成单独的文件，HTML文档代码如下：

\lstinputlisting{example/JavaScript/externaljs.html}

其中使用src属性引用的hello.js文件存放在HTML文件的同一级目录中，外部hello.js文件内容如下：

\lstinputlisting{example/JavaScript/js/hello.js}
